<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="js/themes/default/easyui.css" rel="stylesheet">
<link href="js/themes/icon.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/layer/layer.min.js"></script>
<script type="text/javascript" src="js/qun.js"></script>
<script type="text/javascript" src="js/xdate.js"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
	<div data-options="region:'north'" style="height:56px;background-image: url('images/head_bg.gif');">
		<div style="float:left;width:300px;"><img alt="" src="images/head_logo.png" height=""></div>
        <div style="float:left;width:620px;padding-top:2px;">
        	<span style="color:rgba(255, 0, 0, 0.70);font-size:12px;">本程序依赖QQ导出的消息记录，用户可以选择自动导入QQ消息记录文件。
        	由于自动导入识别率不高，用户可以从QQ消息管理工具中中导出全部消息记录至txt文件，然后通过手动导入按钮，导入QQ消息记录。</span>
        	<a id="btn" href="javascript:$.autoExportFile();">自动导入</a>
        	<a id="btn" href="javascript:$.importFile();">手动导入</a>
        	<input style="display:none;" id="file" multiple type="file" accept=".txt" />	
        </div>
	</div>
	<div data-options="region:'west',split:true" title="QQ群列表" style="width:220px;">
		<ul class="easyui-tree" id="qunTree"></ul>
	</div>
	<div data-options="region:'south',split:true" style="height:50px;">
      	<div style="margin:10px auto;width:160px;">
       	 版权所有，翻版不究！
    	</div>
	</div>
	
	 <div data-options="region:'center'">
	 	<table class="easyui-datagrid" id="messageList" 
	 		data-options="toolbar:'#messageToolBar',fit:true,fitColumns:true,singleSelect:true,pagination:true,pageSize:22,pageList:[20,50,100,200,500,1000]">
		  	<thead>
		        <tr>
		            <th data-options="field:'INTIME',align:'center',width:120">时间</th>
		            <th data-options="field:'QUN_NAME',halign:'center',width:150">QQ群</th>
		            <th data-options="field:'QQ_NAME',halign:'center',width:130">昵称</th>
		            <th data-options="field:'MESSAGE',halign:'center',width:500">消息内容</th>
		        </tr>
		    </thead>
		    <tbody>
		        <tr>
		            <td></td><td></td><td></td><td>暂无数据</td>
		        </tr>	
		    </tbody>
		</table>
	 </div>
</div>
<!-- <div id="win_export" class="easyui-window" title="" style="width:200px;height:70px;padding-left:20px;padding-top:5px;"
        data-options="iconCls:'icon-refresh',closed:true,minimizable:false,collapsible:false,maximizable:false">
        正在导出文件，请稍候...<br/>
  <div id="p2" class="easyui-progressbar" style="width:150px;"></div>
</div>

<div id="win_process" class="easyui-window" title="" style="width:200px;height:70px;padding-left:20px;padding-top:5px;"
        data-options="iconCls:'icon-refresh',closed:true,minimizable:false,collapsible:false,maximizable:false">
        正在解析中，请稍候...<br/>
  <div id="p" class="easyui-progressbar" style="width:150px;"></div>
</div> -->

<div id="messageToolBar">
	<table cellspacing="0" cellpadding="0">
		<tbody><tr>
			<td>关键字：<input type="text" id="searchKey" style="width:120px;"></td>
			<td><div class="datagrid-btn-separator"></div></td>
			<td>QQ号：<input type="text" id="qqId" style="width:120px;"></td>
			<td>时间：<input id="sdate" type="text" class="easyui-datebox" style="width:100px;">
			-
			<input id="edate" type="text" class="easyui-datebox" style="width:100px;"></td>
			<td><div class="datagrid-btn-separator"></div></td>
			<td><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#messageList').datagrid('getPager').pagination('select',1);" data-options="iconCls:'icon-search',plain:true">搜索</a></td>
			<td><div class="datagrid-btn-separator"></div></td>
			<td><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$.exportXls()" data-options="iconCls:'icon-download',plain:true">导出</a></td>
		</tr></tbody>
	</table>
</div>

</body>
<script>
/* var messageToolbar = [{
    text:'导出',
    iconCls:'icon-download' ,
    handler:freezeWin 
}]; */
$(function(){
	var p = $('#messageList').datagrid('getPager');

	$(p).pagination({ 
        onSelectPage: function (pageNumber, pageSize) { 
        	$.catchError(function() {
            	$.getMessage(pageNumber, pageSize);
        	})
        } 
    });

	var date = new XDate();
	$('#edate').datebox('setValue',date.toString('yyyy-MM-dd'));
	$('#sdate').datebox('setValue',date.addMonths('-1').toString('yyyy-MM-dd'));
	
	$('#qunTree').tree({
		onSelect : function(node) {
			$.catchError(function() {
				var opts = $('#messageList').datagrid('getPager').pagination('options');
				$.getMessage(opts.pageNumber,opts.pageSize);
			});
		}
	});

	$.catchError(function() {
		$.refreshGUI(); 
	});

});
</script>

</html>
